<!DOCTYPE html>
<html>

<head>
    <title>predev.js示意</title>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
    <meta name="apple-mobile-web-app-capable" content="yes" />
</head>

<body>
    <main>
        <aside>
            <content>
                <h2>pages</h2>
                <ul>
                    <li><em>index</em>
                        <label><i class='fa fa-angle-right'></i></label>
                    </li>
                    <li><em>index</em>
                        <label><i class='fa fa-angle-right'></i></label>
                    </li>
                    <li><em>index</em>
                        <label><i class='fa fa-angle-right'></i></label>
                    </li>
                </ul>
                <h2>users</h2>
                <ul>
                    <li>
                        <label><i class="fa fa-user"></i></label><em>user</em><pre>dpt.1</pre>
                        <label><i class='fa fa-angle-right'></i></label>
                    </li>
                    <li>
                        <label><i class="fa fa-user"></i></label><em>user</em><pre>dpt.1</pre>
                        <label><i class='fa fa-angle-right'></i></label>
                    </li>
                    <li>
                        <label><i class="fa fa-user"></i></label><em>user</em><pre>dpt.1</pre>
                        <label><i class='fa fa-angle-right'></i></label>
                    </li>
                </ul>
            </content>
        </aside>
        <article>
            <header>
                <section>
                    <li>
                        <button id='aside-btn' evnt='aside-btn'><i class="fa fa-bars"></i></button>
                        <h1>Paratag范例</h1>
                        <button evnt="menu-btn"><i class="fa fa-chevron-down"></i></button>
                        <button evnt='login-btn'><i class='fa fa-user'></i></button>
                        <button><i class="fa fa-close"></i></button>
                    </li>
                    <li height='low'>
                        <nav checked='true'>btn</nav>
                        <nav>btn</nav>
                        <nav>btn</nav>
                    </li>
                </section>
            </header>
            <content id='outer'>
                <section>
                    <ul>
                        <dl>
                            <dt>
                                <label>
                                    <i class="fa fa-user"></i>
                                </label>
                                <em>This is a Date</em>
                            </dt>
                            <dd>
                                <button><i class="fa fa-user"></i></button>
                            </dd>
                            <dd>
                                <button><i class="fa fa-user"></i></button>
                            </dd>
                        </dl>
                        <dl>
                            <dt>
                                <label>
                                    <i class="fa fa-user"></i>
                                </label>
                                <em>This is a Date</em>
                            </dt>
                            <dt>
                                <pre>
                                    <button><i class="fa fa-user"></i></button>
                                    <button><i class="fa fa-user"></i></button>
                                </pre>
                            </dt>
                        </dl>
                        <dl>
                            <dt>
                                <label>
                                    <i class="fa fa-user"></i>
                                </label>
                                <em>This is a Date</em>
                            </dt>
                            <dt>
                                <pre>
                                    <button><i class="fa fa-user"></i></button>
                                    <button><i class="fa fa-user"></i></button>
                                </pre>
                            </dt>
                        </dl>
                    </ul>
                    <ul col="2">
                        <dl>
                            <dd>
                                <div>
                                    <label><i class="fa fa-user"></i></label>
                                    <em>This is a time picker</em>
                                </div>
                                <div>
                                    <p>我是content里面的内容我可以随便写</p>
                                    <p>多行文本的问题</p>
                                </div>
                                <div>
                                    <pre><button><i class="fa fa-user"></i></button></pre>
                                </div>
                            </dd>
                        </dl>
                    </ul>
                    <h2>This is a list</h2>
                    <ol>
                        <li evnt='modal-btn' monitor='2-1'>
                            <em>This is a modal btn</em>
                            <button type="pos"><i class="fa fa-cog"></i></button>
                        </li>
                        <li evnt='input-btn' class='blink-theme' monitor='2-2'>
                            <em>This is a input btn</em>
                            <pre>Input res</pre>
                            <label><i class="fa fa-angle-right"></i></label>
                        </li>
                        <li evnt='confirm-btn' class='blink-theme' monitor='2-3'>
                            <em>This is a confirm btn</em>
                            <pre></pre>
                            <label><i class="fa fa-angle-right"></i></label>
                        </li>
                        <li evnt='toast-btn' class='blink-theme' monitor='2-4'>
                            <em>This is a toast btn</em>
                            <label><i class="fa fa-angle-right"></i></label>
                        </li>
                    </ol>
                </section>
            </content>
        </article>
    </main>
    <script data-main='./src/main' src='./require.js'></script>
    <script>
    require.init = function() {
        console.log(Scroller);
    }
    </script>
</body>

</html>
